<template>
  <q-btn
    flat
    dense
    size="12px"
    :label="menuLabel"
    :icon="menuIcon"
  >
    <q-menu>
      <q-list v-for="(item, index) in menuList" :key="index">
        <q-item clickable v-close-popup @click="onClick(item)">
          <q-item-section>{{item.label}}</q-item-section>
        </q-item>
      </q-list>
    </q-menu>
  </q-btn>
</template>

<script lang="ts">
import { defineComponent, toRefs, onMounted, watch,  PropType } from 'vue';

export interface CMenuItem {
  label: string,
  callback: () => void
}

export default defineComponent({
  name: 'MenuItem',
  props: {
    menuLabel: {
      type: String,
      required: true
    },

    menuIcon: {
      type: String,
      required: true
    },

    menuList: {
      type: Array as PropType<CMenuItem[]>,   //传递对象数组
      default: () => {
        return []
      }
    }
  },

  setup (props, context) {
    //数据解构
    const {
      menuLabel,
      menuIcon,
      menuList
    } = toRefs(props);


    //菜单点击事件
    const onClick = (menu: CMenuItem) => {
      if ((menu) && (menu.callback)) {
        menu.callback();
      }
    }

    //*******************************
    //      启动模块
    //*******************************
    //初始化
    const init = () => {

    }

    //监视数据源
    watch(() => menuList, () => {
      init();
    }, { deep: true });

    //加载数据
    onMounted(() => {
      init();
    });

    return {
      menuLabel,
      menuIcon,
      menuList,
      onClick
    }
  }
})
</script>

<style lang="scss" scoped>
.my-select-box {
  max-width: 400px;
  overflow: hidden;  // 超出的文本隐藏
  text-overflow: ellipsis; // 溢出用省略号显示
}

</style>
